<template>
  <div v-if="parentButton.length !== 0">
    <div style="display: flex">
      <span v-for="item in parentButton" :key="item.buttonKey">
        <el-badge value="无权限,可授权" class="item" v-if="item?.isDisabled">
          <el-tooltip content="请到【权限设置】->【角色权限】中授权" effect="customized">
            <el-button
              :key="item.buttonKey"
              :type="item?.color === '' ? item?.types : ''"
              :size="item?.size"
              :text="item?.isText"
              :round="item?.isRound"
              :plain="item?.isPlain"
              :circle="item?.isCircle"
              :color="item?.color"
              :disabled="item?.isDisabled"
              @click="openPage(item.buttonKey)"
              style="margin-left: 10px"
            >
              <template #icon v-if="item?.icon !== ''">
                <el-icon :color="item?.textColor"
                  ><component class="icons" :is="item?.icon"></component
                ></el-icon>
              </template>
              <span :style="{ color: item?.textColor }">{{ item.buttonName }}</span>
            </el-button>
          </el-tooltip>
        </el-badge>
        <el-button
          v-if="!item?.isDisabled"
          :key="item.buttonKey"
          :type="item?.color === '' ? item?.types : ''"
          :size="item?.size"
          :text="item?.isText"
          :round="item?.isRound"
          :plain="item?.isPlain"
          :circle="item?.isCircle"
          :color="item?.color"
          :disabled="item?.isDisabled"
          @click="openPage(item.buttonKey)"
          style="margin-left: 10px"
        >
          <template #icon v-if="item?.icon !== ''">
            <el-icon :color="item?.textColor"
              ><component class="icons" :is="item?.icon"></component
            ></el-icon>
          </template>
          <span :style="{ color: item?.textColor }">{{ item.buttonName }}</span>
        </el-button>
      </span>
      <div style="margin-left: 10px; align-items: center; display: flex">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="点击查看帮助文档"
          placement="right-start"
        >
          <el-icon
            style="cursor: pointer"
            size="20"
            color="blue"
            @click="dialogVisible = true"
            ><QuestionFilled
          /></el-icon>
        </el-tooltip>
      </div>
      <el-drawer size="1600" v-model="dialogVisible" title="帮助中心">
        <template #title>
          <div style="font-size: 26px; color: black; font-weight: 700">帮助中心</div>
        </template>
        <iframe :src="helperRoute" width="100%" height="100%" frameborder="0"></iframe>
      </el-drawer>
    </div>
  </div>
  <div v-else>当前菜单不存在按钮</div>
</template>

<script lang="ts">
import { getMenuButtonAuthList } from "@/api/button";
import { GetParamUrl } from "@/api/publicTool";
import { helperUrl } from "@/api/requestAddress";
import { ButtonRoleTypeEnum } from "@/enum/public";
import { SysButtonDataOutPut } from "@/model/button/button";
import { ElMessage } from "element-plus";
import { defineComponent, onMounted, PropType, ref } from "vue";
export default defineComponent({
  props: {
    model: {
      type: Object as PropType<any>,
      //   required: true,
    },
    helperPath: { type: String, required: true },
  },

  setup(props, context) {
    const helperRoute = ref<string>(helperUrl + props.helperPath);
    const parentButton = ref<SysButtonDataOutPut[]>([]);
    const dialogVisible = ref<boolean>(false);
    //初始化数据
    onMounted(() => {
      getButtonByMenuMsg();
    });

    //获取按钮样式
    const getButtonByMenuMsg = async () => {
      var menuId = GetParamUrl("MenuId");
      getMenuButtonAuthList({
        menuId: menuId,
        buttonRoleType: ButtonRoleTypeEnum.MenuButton,
      }).then(({ data, code, msg }) => {
        if (code == 200) {
          parentButton.value = data;
        } else {
          ElMessage({
            message: msg,
            type: "warning",
          });
        }
      });
    };

    const openPage = function (row: string) {
      context.emit(row, props.model);
    };
    return {
      openPage,
      parentButton,
      dialogVisible,
      helperUrl,
      helperRoute,
    };
  },
  components: {},
});
</script>
<style scoped>
::v-deep .el-badge__content {
  transform: translateY(-70%) translateX(0%) !important; /* 调整位置 */
}
</style>
